<script setup>
defineProps({
  // 岗位名称
  Jobname: {
    type: String
  },
  // 薪资
  Salary: {
    type: String
  },
  // 地点
  loc: {
    type: String
  },
  // 图标
  logo: {
    type: String
  },
  // 公司名
  companyName: {
    type: String
  }
})
</script>

<template>
  <div class="home-panel">
    <el-descriptions :column="24">
      <el-descriptions-item :span="20">{{ Jobname }}</el-descriptions-item>
      <el-descriptions-item :span="4">{{ Salary }}</el-descriptions-item>
      <el-descriptions-item :span="24" align="center">
        <ul>
          <el-space spacer="|">
            <li>
              <el-tag size="small">{{ loc }}</el-tag>
            </li>
            <!-- <li><el-tag size="small">三年经验</el-tag></li>
            <li><el-tag size="small">本科以上</el-tag></li> -->
          </el-space>
        </ul>
      </el-descriptions-item>
      <el-descriptions-item>
        <a href="" class="company-info">
          <p>
            <el-space>
              <img :src="logo" />
              <span class="company-name">{{ companyName }}</span>
            </el-space>
          </p>
        </a>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style lang="scss" scoped>
.home-panel {
  background-color: #fff;
  padding: 10px;
}
ul {
  display: flex;
  list-style: none;
  justify-content: left;
  li {
    :deep(.el-tag__content) {
      max-width: 300px;
      overflow: hidden;
    }
  }
}
.company-info p img {
  height: 24px;
  width: 24px;
  border-radius: 4px;
}
.company-info p .company-name {
  line-height: 24px;
}
</style>
